<template>
  <page-container
    :show="submitData.show"
    @enter="onEnter"
    @clickoverlay="submitData.show = false"
  >
    <view class="popups">
      <text class="popups-title">选择成员</text>
      <view class="member-view">
        <image src="/static/other/touxiang.svg" mode="widthFix"></image>
        <view class="patient_info">
          <text class="patient_name">{{ name }}</text>
          <text class="select" @click="choosePatient">{{
            name == "" ? "选择就诊人" : "重新选择"
          }}</text>
        </view>
      </view>
      <view class="select-submit" @click="subMit">提交预约</view>
    </view>
  </page-container>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
// import {usepatientStore} from "~/store/index"
import { usepatientStore } from "../../store/index";
import apiRequest from "../../api/index";

function onEnter() {
  console.log("进入中触发");
}

// 待提交的值
let submitData = reactive({
  phy_name: "",
  phy_time: "",
  show: false,
  patient_id: "",
});

// 被父组件调用的方法
function trigGer(event) {
  submitData.phy_name = event.phy_name;
  submitData.phy_time = event.phy_time;
  submitData.show = event.show;
}

// 将需要暴露出去的数据与方法暴露给父组件
defineExpose({ trigGer });

// 选择就诊人
function choosePatient() {
  uni.navigateTo({
    url: "/pages/submit-success/my-patient/my-patient",
  });
}

// 监听选择的就诊人
let name = ref("");
const store = usepatientStore();
store.$subscribe((mutayion, state) => {
  //subscribe=watch
  name.value = state.patient.name;
  submitData.patient_id = state.patient._id;
});

// 提交预约
async function subMit() {
  uni.showLoading({ title: "提交中", mask: true });
  const res = await apiRequest.ResPhy(submitData);
  console.log(res);
  if (res.msg == "提交成功") {
    uni.hideLoading();
    uni.redirectTo({
      url: "/pages/submit-success/Booking/Booking",
    });
  }
}
</script>

<style lang="scss">
.popups {
  height: 400rpx;
  width: 100%;
  padding: 30rpx 20rpx;
  @apply bg-light-50 flex flex-col;
  .popups-title {
    @apply font-bold;
    font-size: 34rpx;
    text-align: center;
  }
  .member-view {
    @apply flex;
    align-items: center;
    // justify-content: space-between;
    margin: 20rpx 0 40rpx 0;
    image {
      width: 100rpx;
      height: 100rpx;
    }
    .patient_info {
      @apply flex flex-1;
      padding: 10rpx;
      justify-content: space-between;
      align-items: center;
      .patient_name{
        @apply font-bold;
        font-size: 32rpx
      }
      .select {
        @apply text-blue-400;
      }
    }
  }
  .select-submit {
    @apply bg-blue-600 text-light-50;
    border-radius: 10rpx;
    text-align: center;
    height: 100rpx;
    line-height: 100rpx;
    font-size: 34rpx;
  }
}
</style>
